<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="admin/base :: commonHead(_,_)"></head>
<link rel="stylesheet" th:href="@{/js/jconfirm/jquery-confirm.min.css}">
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside th:replace="admin/base :: commonMenu"></aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header th:replace="admin/base :: commonHeader"></header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <div class="toolbar-btn-action">
                                    <input id="img-input" name="image" style="display: none" type="file" value=""/>
                                    <a class="btn btn-primary m-r-5" id="btn-img"><i
                                            class="mdi mdi-plus"></i>新增</a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


        </main>
        <!--End 页面主要内容-->
        </aside>
    </div>
</div>
<footer th:replace="admin/base :: commonFooter"></footer>

<script type="text/javascript">
    $(document).ready(function () {
        $(".table-responsive").append(
            '<table class="table table-bordered">' +
            '<thead>' +
            '<tr>' +
            '<th>文件名</th>' +
            '<th>文件类型</th>' +
            '<th>文件大小</th>' +
            '<th>最后更新</th>' +
            '<th>操作</th>' +
            '</tr>' +
            '</thead>' +
            '</table>'
        );


        $.ajax({
            url: "/admin/oss/list", async: true, success: function (result) {
                var html = ""
                var fileInfos = result.data.fileInfos;
                for (let i = 0; i < fileInfos.length; i++) {
                    var url1 = result.data.url + fileInfos[i].key;

                    html += '<tr>' +
                        '<td>' + fileInfos[i].key + '</td>' +
                        '<td>' + fileInfos[i].mimeType + '</td>' +
                        '<td>' + (fileInfos[i].fsize / 1024).toFixed(2) + 'KB' + '</td>' +
                        '<td>' + new Date(fileInfos[i].putTime).toLocaleString() + '</td>' +
                        '<td>' +
                        '<div class="btn-group">' +
                        '<a class="btn btn-xs btn-default"   data-original-title="查看" onclick="clickLookFile(\'' + url1 + '\')" ><i class="mdi mdi-eye"></i></a>' +
                        '<a class="btn btn-xs btn-default edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
                        '<a class="btn btn-xs btn-default" id="example-error-notify" onclick="clickDelete(\'' + fileInfos[i].key + '\')" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>' +
                        '</div>' +
                        '</td>' +
                        '<tr>'
                }
                $(".table-bordered").append(html);

            }
        });
    });

    function clickLookFile(url) {
        if (url.search("js|css|txt") !== -1) {
            $.confirm({
                title: '查看文件',
                content: '<h4>请查看为图片类型文件</h4>',
                buttons: {
                    cancel: {
                        text: '取消'
                    }
                }
            })
        } else {
            $.confirm({
                title: '查看文件',
                content: '<img src="' + url + '?imageView2/2/w/400/h/500/interlace/1/q/100&last_modify=16340317396817144' + '">',
                buttons: {
                    cancel: {
                        text: '取消'
                    }
                }
            })
        }

    }

    function clickDelete(key) {
        lightyear.loading('show');
        // 假设ajax提交操作
        $.ajax({
            type: "DELETE",
            url: "/admin/oss/delete",
            contentType: "application/json",
            dataType: "json",
            timeout: 50000,
            data: JSON.stringify([key]),
            async: false,
            success: function (data) {
                lightyear.loading('show');
                // 假设ajax提交操作
                if (data.code === 1) {
                    setTimeout(function () {
                        lightyear.loading('hide');
                        lightyear.url("/admin/oss/");  // 先指定跳转链接
                        lightyear.notify('删除成功，页面即将刷新', 'success', 300);
                    }, 1e3)
                } else {
                    setTimeout(function () {
                        lightyear.loading('hide');
                        lightyear.notify(data.msg, 'warning', 100);
                    }, 1e3)
                }

            },
            error: function (err) {
                setTimeout(function () {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
                }, 1e3)
            }
        });
    }
</script>
<script>
    // 点击按钮点击input标签
    $("#btn-img").click(function () {
        $("#img-input").click();
    })

    // 获取input file数据
    $("#img-input").change(function () {
        var formData = new FormData();
        formData.append('img', document.getElementById('img-input').files[0]);

        $.ajax({
            url: "/admin/oss/upload",
            type: "POST",
            data: formData,
            contentType: false,//用于对data参数进行序列化处理 这里必须false
            processData: false,//必须*/
            success: function (data) {
                lightyear.loading('show');
                // 假设ajax提交操作
                setTimeout(function () {
                    lightyear.loading('hide');
                    lightyear.url("/admin/oss");  // 先指定跳转链接
                    if (data.code === 1) {
                        lightyear.notify(data.msg + '，页面即将刷新', 'success', 1000);
                    } else {
                        lightyear.notify(data.msg, 'warning', 400);
                    }
                }, 1e3)
            },
            error: function (data) {
                setTimeout(function () {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
                }, 1e3)
            }
        });
    })
</script>
</body>
</html>